<template>
  <div class="brandcon">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="iconfont icon-dingdan"></span><span>品牌管理列表</span>
        <el-button style="float: right" size="mini" @click="goAddPage">添加</el-button>
      </div>
    </el-card>
    <el-table :data="brandList" style="width: 100%" border>
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column label="编号" prop="id">
      </el-table-column>
      <el-table-column prop="name" label="品牌名称" width="120">
      </el-table-column>
      <el-table-column prop="first_letter" label="品牌首字母">
      </el-table-column>
      <el-table-column prop="sort" label="排序" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" label="品牌制造商">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.factory_status" :active-value="1" :inactive-value="0">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column align="center" label="是否显示">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.show_status" :active-value="1" :inactive-value="0">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="相关">
        <template slot-scope="scope">
          <div>商品：{{scope.row.product_count}}</div>
          <div>评价：{{scope.row.product_comment_count}}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="small" @click="goUpdatePage(scope.row.id)">编辑</el-button>
          <el-button type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="float:right" background @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="listQuery.pageNum" :page-sizes="[2,5]" :page-size="listQuery.pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>


<script>
import "@/assets/style/global.css";
import { getBrand } from '@/api/product'
export default {
  name: "brand",
  data: function () {
    return {
      brandList: [],
      listQuery: {
        pageSize: 5, //一页5条数据
        pageNum: 1, //当前页
      },
      total: 0
    }
  },
  mounted () {
    this.getBranddata()
  },
  methods: {
    async getBranddata () {
      var res = await getBrand(this.listQuery);
      console.log(res)
      this.brandList = res.data;
      this.total = res.total
    },
    handleSizeChange (val) {
      console.log("修改一页的数据量", val);
      this.listQuery.pageSize = val;
      this.listQuery.pageNum = 1;
      this.getBranddata();
    },
    handleCurrentChange (val) {
      console.log("修改当前页页码", val);
      this.listQuery.pageNum = val;
      this.getBranddata();
    },
    goAddPage () {
      this.$router.push('/pms/brandAdd')
    },
    goUpdatePage (id) {
      this.$router.push('/pms/brandUpdate/' + id)
    }
  }
};
</script>

<style lang="scss" scoped>
.brandcon {
  margin: 20px;
  .box-card {
    margin-bottom: 20px;
  }
}
</style>
